
<template>
  <div id="ticketD">
    <div class="top">
      <div class="one">
        <p>
          订单号：
          <span>{{orderId}}</span>
          <span>{{index == 1?'已使用':'待使用'}}</span>
        </p>
        <p>
          下单时间：
          <span>{{orderDate}}</span>
          <span></span>
        </p>
      </div>
      <!-- 如购买的商品是 第三方电子券，则只显示 该卡券的链接、有效期、兑换码（待付款状态为空） -->
      <div class="four" 
        v-if="type == 'third'">
        <div>
          <p>
            链接：
            <span>
              <!-- <a :href="detail.url" target="_Blank">{{detail.url.indexOf('无')>-1?'':detail.url}}</a>
              {{detail.url.indexOf('无')>-1?'暂无链接':''}} -->
              <a :href="detail.url" target="_Blank">{{detail.url.indexOf('无')>-1?'':detail.url}}</a>
              {{detail.url.indexOf('无')>-1?'暂无链接':''}}
            </span>
          </p>
          <p>
            有效期：
            <span>{{detail.validTime}}</span>
          </p>
          <p>
            兑换码：
            <span>{{detail.couponPsw}}</span>
          </p>
        </div>
      </div>
      <!-- 如购买的商品是 自营电子券，则只显示兑换二维码 -->
      <div class="four" v-if="type != 'third'">
        <div class='virtualBox' >
          <img :src="detail.qrCodePhoto[0].fileUrl" alt="">
          <div class='virtual'>
            <span>{{detail.goodsCode}}</span>
          </div>
          <div class='virtual'>
            <span>有效期：{{detail.validTime}}</span>
          </div>
        </div>
      </div>
      <div v-if="type == 'third'&&detail.isUse == 'n'" @click="confrimBtn" class="btn-user">标记使用</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ticketD",
  data() {
    return {
      type: '',
      serviceStatus: '',
      detail:{},
      orderId:'',
      index:0,
      orderDate:''
    };
  },
  mounted() {
    this.type = this.$route.query.type
    this.orderId = this.$route.query.orderId
    this.index= this.$route.query.index
    this.orderDate= this.$route.query.orderDate
    
    this.getD();
  },
  created() {},
  methods: {
    getD() {
      let url =
        `${this.type == 'third'?this.$CONSTANT.COUPON.findEsThirdCouponDetailsById:this.$CONSTANT.COUPON.findStoreEsVirtualCardUseRecordById}` +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        id: this.$route.query.id
      };
      // this.$vux.loading.show({
      //   text: "Loading"
      // });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.detail = bussData
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    confrimBtn(v){
      var that = this
      this.$vux.confirm.show({
        title: '提示',
        content: '确认标记该电子券为已使用吗',
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        },
        onCancel () {
          console.log('plugin cancel')
        },
        onConfirm () {
          console.log('plugin confirm')
          let url =
            that.$CONSTANT.COUPON.updateMyCoupon +
            "?sessionId=" +
            that.$common.getCookie("sessionId");
          let param = {
            id: that.$route.query.id,
            status:'y',
            type:'third'
          };
          that.$vux.loading.show({
            text: 'Loading'
          })
          setTimeout(() => {
            that.$common.post(url, param, res => {
              that.$vux.loading.hide()
              if (res.status == 200) {
                that.$vux.toast.show({
                  text: '修改成功',
                  type: "success",
                  width: 'auto'
                });
                that.index = 1
                that.getD();
              } else {
                that.$vux.toast.show({
                  text: res.msg,
                  type: "warn",
                  width: 'auto'
                });
              }
            });
          }, 1000);
        }
      })
    }
  },
  components: {}
};
</script>

<style lang="less">
#ticketD {
  .btn-user{
    width:110px;
    height:38px;
    background:rgba(238,60,74,1);
    border-radius:19px;
    line-height: 38px;
    text-align: center;
    font-size:13px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(255,255,255,1);
    margin: 40px auto 0;
  }
  .top {
    .one {
      background: #fff;
      padding: 0 11px 24px;
      p {
        color: #333;
        font-size: 15px;
        font-family: PingFang-SC-Bold;font-weight: 600;
        padding-top: 24px;
        span {
          &:last-child {
            float: right;
            color: #ec1b24;
            font-size: 15px;
            font-family: PingFang-SC-Medium;
          }
          &:first-child {
            font-family: PingFang-SC-Medium;
          }
        }
        &:last-child {
          padding-top: 6px;
        }
      }
    }
    .two {
      background: #fff;
      margin-top: 8px;
      margin-bottom: 8px;
      padding: 22px 11px;
      position: relative;
      img {
        position: absolute;
        top: 22px;
        left: 11px;
        width: 26.6%;
        height: 94px;
        border: 1px solid transparent;
        border-radius: 3px;
        margin-right: 15px;
        object-fit: contain;
        display: inline-block;
      }
      .detail {
        display: inline-block;
        width: 65.1%;
        vertical-align: top;
        position: relative;
        height: 96px;
        margin-left: 33%;
        p {
          color: #333;
          font-size: 15px;
          font-family: PingFang-SC-Medium;
        }
        span {
          margin-top: 41px;
          color: #ea030b;
          font-size: 15px;
          font-family: PingFang-SC-Bold;font-weight: 600;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        i{
          color: #999;
          font-size: 14px;
          font-family: PingFang-SC-Medium;
          position: absolute;
          bottom: 0;
          right: 0;
          font-style: initial;
        }
      }
    }
    .three,
    .four {
      margin-bottom: 8px;
      margin-top: 7.5px;
      padding-top: 15px;
      padding-bottom: 10px;
      background-color: #fff;
      p {
        font-size:15px;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
        span {
          font-size:15px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
          word-break: break-all;
        }
      }
      img{
        display: block;
        width: 150px;
        height: 150px;
        margin: 10px auto;
        margin-top: 0;
        padding-top: 10px;
      }
      >div{
        margin-bottom: 10px;
        padding: 0 11px;
        background: #fff;
      }
      div.virtualBox{
        margin-bottom: 0px;
        text-align: center;
        span{
          color: #666;
          font-family: PingFang-SC-Medium;
        }
      }
    }
    .three{
      background: #fff;
      padding: 22px 11px;
    }
  }
}
</style>
